<template>
	<view class="">
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		
	</view>
</template>


<script>
	export default {
		
		data() {
			return {
				
				// 悬浮按钮
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#e6202f',
					buttonColor: '#e6202f',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [
					{
						iconPath: '/static/img/home-return.png',
						selectedIconPath: '/static/img/home-return.png',
						text: '首页',
						active: false
					},
					{
						iconPath: '/static/img/return.png',
						selectedIconPath: '/static/img/return.png',
						text: '返回',
						active: false
					}
				]
				
			}
		},
		// 悬浮按钮
		onBackPress() {
			// if (this.$refs.fab.isShow) {
			// 	this.$refs.fab.close()
			// 	return true
			// }
			// return false
		},		
		onLoad() {
		},
		methods: {
			// 悬浮按钮
			trigger(e) {
				console.log(e.index)
				if(e.index == 0){
					uni.switchTab({
					   url:'/pages/shop/shop'
					});
				}else if(e.index == 1){
					uni.navigateBack({
						delta: 1
					});
				}
				// this.content[e.index].active = !e.item.active
				// uni.showModal({
				// 	title: '提示',
				// 	content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定')
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消')
				// 		}
				// 	}
				// })
			},
			fabClick() {
				console.log('点击了悬浮按钮');
				// uni.showToast({
				// 	title: '点击了悬浮按钮',
				// 	icon: 'none'
				// })
			},
			switchBtn(hor, ver) {
				if (hor === 0) {
					this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
					this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
				} else {
					this.horizontal = hor
					this.vertical = ver
				}
				this.$forceUpdate()
			},
			switchColor() {
				this.is_color_type = !this.is_color_type
				if (this.is_color_type) {
					this.pattern.iconColor = '#aaa'
					this.pattern.buttonColor = '#fff'
				} else {
					this.pattern.iconColor = '#fff'
					this.pattern.buttonColor = '#e6202f'
				}
			},
			
			
		}
	}
</script>


<style lang="scss">
	
	.uni-padding-wrap{
		padding: 30rpx;
	}
	
	.uni-flex{
		position: relative;
		.uni-icons{
			position: absolute;
			right: 0;
			top: 40%;
			color: #000;
		}
		.flex-item{
			text{
				display: block;
			}
		}
		.item-hd{
			position: relative;
			width: 40%;
			color: #000;
			text:last-child{
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
		.item-bd{
			width: 60%;
			
			label{
				color: #7b7b7b;
			}
			text{
				font-size: 24rpx;
				margin-bottom: 16rpx;
			}
			text:last-child{
				margin-bottom: 0;
			}
		}
	}
	.code-btn{
		width: 180rpx;
		height: 180rpx;
		line-height: 180rpx;
		border-radius: 90rpx;
		font-size: 28rpx;
		box-shadow: 0 0 16rpx rgba(0, 0, 0, .2);
	}
	
	
	.member-recharge{
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		.uni-input{
			color: #000;
			// font-size: 34rpx;
			padding: 14rpx 30rpx;
		}
	}
	.uni-forms-item{
		margin-bottom: 0;
	}
	.verification-code{
		margin-top: 30rpx;
	}
	page{
		background-color: #fafafa;
	}
</style>